<style type="text/css">
	.ace_editor {
		width: 100%;
		height: 100%;
	}
	.resize {
		margin-bottom: 15px;
		border: 1px solid lightgrey;
		height: 150px;
		width: 100%
	}
	.chart {
		margin: 50px;
	}
	.chart .rgraph {
		height: 500px;
		margin-bottom: 24px;
	}
	.chart .bar {
		fill: #428bca;
	}
	.chart .x_tick .title {
		bottom: -24px;
	}
	.rgraph {
		position: relative;
		left: 50px;
	}
	.y_axis {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 50px;
	}
	.rswatch {
		display: inline-block;
		width: 10px;
		height: 10px;
		margin: 0 8px 0 0;
	}
	.rlabel {
		display: inline-block;
	}
	.rline {
		display: inline-block;
		color: black;
		margin: 0 0 0 30px;
	}
	.nav-tabs {
		margin-bottom: 15px;
		margin-top: 15px;
	}
</style>
<div class="row">
	<div class="col-sm-12">
		<form>
			<div class="form-group">
				<div tsresizable on-resize="editor.resize()" class='resize'>
					<div ui-ace="{ onLoad : aceLoaded, mode: aceMode, theme: aceTheme, advanced: { fontSize: '14px', fontFamily: 'Menlo, Monaco, Consolas, monospace' }}"
					ng-model="expr" ng-keydown="keydown($event)"></div>
				</div>
			</div>
		</form>
		<form class="form-inline">
			<div class="form-group">
				<label class="control-label">Date</label>
				<input type="text" class="form-control" ng-model="date" placeholder="yyyy-mm-dd" bs-datepicker data-date-format="yyyy-MM-dd" data-date-type="string">
			</div>
			<div class="form-group">
				<label class="control-label">Time</label>
				<input type="text" class="form-control" ng-model="time" placeholder="HH:MM:SS">
			</div>
			<div class="form-group">
				<button class="btn btn-primary" ng-click="set()">Test</button>
			</div>
			<div class="pull-right">
				<a class="btn btn-default" ng-href="/config?expr={{btoa(expr)}}" ng-disabled="result_type != 'scalar' && result_type != 'number'" target="_blank">Rule</a>
				<a class="btn btn-default" ng-href="{{svg_url}}" ng-disabled="!svg_url" target="_blank">Image</a>
			</div>
		</form>
	</div>
</div>
<ul class="nav nav-tabs">
	<li ng-class="{active: tab == 'results'}"><a href ng-click="tab = 'results'">Results</a></li>
	<li ng-show="graph" ng-class="{active: tab == 'graph'}"><a href ng-click="tab = 'graph'">Graph</a></li>
	<li ng-show="bar" ng-class="{active: tab == 'bar'}"><a href ng-click="tab = 'bar'">Bar Chart</a></li>
</ul>
<div class="tab-content">
	<div class="tab-pane" ng-class="{active: tab == 'results'}" ts-results></div>
	<div class="tab-pane chart active" ng-if="tab == 'graph'" ts-graph data="graph" height="600"></div>
	<div class="tab-pane chart active" ng-if="tab == 'bar'" ts-bar data="bar" height="600"></div>
</div>